const directives = {}
directives.install = function (Vue) {
  // 图片懒加载
  Vue.directive('lazy', {
    inserted: function (el, binding) {
      const observer = new IntersectionObserver(([{ isIntersecting }]) => {
        // true；进入可视区域，false：未进入可视区域
        if (isIntersecting) {
          // 1、给图片的src属性赋值图片的地址
          el.src = binding.value
          // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
          observer.unobserve(el)
        }
      })
      el.src = require('@/assets/loading.gif')
      // 监听dom元素
      observer.observe(el)
    },
  })
  // 用法v-lazy = '真正的图片地址'
}
export default directives